<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>封装和继承 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="1.封装和继承​    i 封装 ​    为了隐藏细节 ​    ii 继承 ​    为了复用代码 ​    iii 多态 ​    灵活 ####1.1原型链(对象与对象之间的关系) 12var obj1 = &amp;#123;name:&apos;1&apos;&amp;#125;;window.Object.prototype === obj.__proto__; //true  上面的原型链图形象的表示了他们之间的关系">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="封装和继承">
<meta property="og:url" content="https://storm4542.github.io/archives/6936d1ca.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="1.封装和继承​    i 封装 ​    为了隐藏细节 ​    ii 继承 ​    为了复用代码 ​    iii 多态 ​    灵活 ####1.1原型链(对象与对象之间的关系) 12var obj1 = &amp;#123;name:&apos;1&apos;&amp;#125;;window.Object.prototype === obj.__proto__; //true  上面的原型链图形象的表示了他们之间的关系">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://storm4542.github.io/imgaes/原型链.png">
<meta property="og:updated_time" content="2018-08-25T09:08:27.177Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="封装和继承">
<meta name="twitter:description" content="1.封装和继承​    i 封装 ​    为了隐藏细节 ​    ii 继承 ​    为了复用代码 ​    iii 多态 ​    灵活 ####1.1原型链(对象与对象之间的关系) 12var obj1 = &amp;#123;name:&apos;1&apos;&amp;#125;;window.Object.prototype === obj.__proto__; //true  上面的原型链图形象的表示了他们之间的关系">
<meta name="twitter:image" content="https://storm4542.github.io/imgaes/原型链.png">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-封装和继承" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      封装和继承
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-封装和继承"><a href="#1-封装和继承" class="headerlink" title="1.封装和继承"></a>1.封装和继承</h3><p>​    i 封装</p>
<p>​    为了隐藏细节</p>
<p>​    ii 继承</p>
<p>​    为了复用代码</p>
<p>​    iii 多态</p>
<p>​    灵活</p>
<p>####1.1原型链(对象与对象之间的关系)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1 = &#123;<span class="attr">name</span>:<span class="string">'1'</span>&#125;;</span><br><span class="line"><span class="built_in">window</span>.Object.prototype === obj.__proto__; <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://storm4542.github.io/imgaes/%E5%8E%9F%E5%9E%8B%E9%93%BE.png" alt="原型链"></p>
<p>上面的原型链图形象的表示了他们之间的关系，说白了就是大家都共用同一个 “ 仓库” , 所有对象都共用 <strong>Object</strong>的原型，他们各自又有自己的 “ 仓库” </p>
<p><code>arr1.__proto__ === window.Array.prototype</code> 自己的 Array 仓库，里面有 join ,splice 等方法</p>
<p><code>arr1.__proto__.__proto__ === window.Object.prototype</code>  Object的仓库，里面有 toString , valueOf 等方法</p>
<p><strong>Object 是所有对象的最底层的原型。</strong></p>
<h4 id="1-2this-对象与函数之间的关系"><a href="#1-2this-对象与函数之间的关系" class="headerlink" title="1.2this(对象与函数之间的关系)"></a>1.2this(对象与函数之间的关系)</h4><p>函数： 可执行代码组成的一种对象</p>
<p>所有使用 <code>function</code>声明的函数都只有两个参数 this 和 arguments,</p>
<p><strong>一定要记住</strong></p>
<blockquote>
<p><strong>1.参数的值只有传参的时候才能确定</strong></p>
<p><strong>2.this 是call()的第一个参数 </strong></p>
<p><strong>=&gt; this 的值只有在传参的时候才能确定</strong></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">	name:<span class="string">'mayun'</span>,</span><br><span class="line">    child:&#123;</span><br><span class="line">      name:<span class="string">'sicong'</span>,</span><br><span class="line">      sayName:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>.name)&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.child.sayName() <span class="comment">//sicong this === obj.child  就是函数的 点 前面的所有</span></span><br><span class="line">obj.child.sayName.call(obj) <span class="comment">// mayun 因为 this === obj  obj.name === 'mayun'</span></span><br><span class="line"><span class="comment">//因此我们也可以看出 function()&#123;&#125; 跟这个 sayName 一点关系都没有， sayName 只是存了 function()&#123;&#125; 的地址而已</span></span><br><span class="line"><span class="comment">//更直观点</span></span><br><span class="line">obj.child.sayName.call(&#123;<span class="attr">name</span>:<span class="string">'wtf'</span>&#125;) <span class="comment">//wtf</span></span><br></pre></td></tr></table></figure>
<p>来几个题试试</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; f()</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123; ‘use strict’ <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; f()</span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">sayThis</span>:f&#125; ; obj.sayThis()</span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">sayThis</span>:f&#125; ; obj.sayThis.call()</span><br><span class="line">button.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;</span><br><span class="line">$(<span class="string">'#test'</span>).on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;)</span><br><span class="line">$(<span class="string">'#ul1'</span>).on(<span class="string">'click'</span>,<span class="string">'li'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;)</span><br><span class="line">varvm = <span class="keyword">new</span> Vue(&#123;<span class="attr">data</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;&#125;)</span><br></pre></td></tr></table></figure>
<p>答案</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>不确定，因为没有传参啊	</span><br><span class="line"><span class="number">2.</span><span class="built_in">window</span></span><br><span class="line"><span class="number">3.</span><span class="literal">undefined</span>(use strict)</span><br><span class="line"><span class="number">4.</span>obj <span class="comment">// . 前面的</span></span><br><span class="line"><span class="number">5.</span><span class="built_in">window</span>/<span class="literal">undefined</span></span><br><span class="line"><span class="number">6.</span>button <span class="comment">//浏览器保证的，只要点击了，this === button </span></span><br><span class="line"><span class="number">7.</span>$(<span class="string">'#test'</span>) <span class="comment">//JQ文档写的 this指向了当前正在执行事件的元素</span></span><br><span class="line"><span class="number">8.</span>li <span class="comment">//JQ文档 this 代表了与 selector 相匹配的元素</span></span><br><span class="line"><span class="number">9.</span><span class="keyword">new</span> 出来的对象 vm <span class="comment">//文档说的,因为它call了new 出来的东西</span></span><br></pre></td></tr></table></figure>
<h1 id="那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！"><a href="#那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！" class="headerlink" title="那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！"></a>那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！</h1><p>箭头函数自己没有 <code>this</code>和<code>arguments</code></p>
<p>它的 this  是外面的 this </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> f = <span class="function"><span class="params">()</span>=&gt;</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125; f() <span class="comment">//window </span></span><br><span class="line"><span class="keyword">var</span> obj = &#123; <span class="attr">sayThis</span> : <span class="function"><span class="params">()</span>=&gt;</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;&#125; ; obj.sayThis </span><br><span class="line"><span class="comment">// window ( 如果是function 那就是obj了) </span></span><br><span class="line"><span class="comment">//因为obj的this是window，所以里面的也是window, ()=&gt;&#123;&#125; 不接收this，也不修改this,外面是什么，它就是什么</span></span><br></pre></td></tr></table></figure>
<h4 id="1-3-bind是什么"><a href="#1-3-bind是什么" class="headerlink" title="1.3 bind是什么"></a>1.3 bind是什么</h4><p>先看下MDN的定义</p>
<blockquote>
<p><code>bind()</code>方法创建一个新的函数, 当被调用时，将其<code>this</code>关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。</p>
</blockquote>
<p>做几个实验</p>
<figure class="highlight javascript"><figcaption><span>//</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; <span class="comment">//this是啥？不知道</span></span><br><span class="line">fn1()<span class="comment">// 哦，this 是 window</span></span><br><span class="line">fn1.call(<span class="number">1</span>) <span class="comment">// this又是 Number(1) 了</span></span><br><span class="line"><span class="comment">//我想写一个直接就知道this是什么的函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params"></span>)</span>&#123; fn1.call(<span class="number">1</span>) &#125; <span class="comment">//this 肯定是 Number(1) ，我都钦定了,但是这么写有点啰嗦，JS帮我整个方法</span></span><br><span class="line"><span class="keyword">var</span> fn3 = fn1.bind(<span class="number">1</span>) ; fn3()  <span class="comment">// Number(1)</span></span><br></pre></td></tr></table></figure>
<p><strong>上面我们说到了，this 其实只是函数的第一个参数而已，第二个参数是arguments，我能不能也钦定一下子？</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) ;<span class="built_in">console</span>.log(<span class="built_in">arguments</span>) &#125; </span><br><span class="line">fn1() <span class="comment">// window []</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params"></span>)</span>&#123; fn1.call(<span class="number">1</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>) &#125; </span><br><span class="line">fn2()<span class="comment">// Number(1) ['a','b','c']</span></span><br><span class="line"><span class="comment">//那这样的话，bind是不是也能指定arguments呢？</span></span><br><span class="line"><span class="keyword">var</span> fn3 = fn1.bind(<span class="number">1</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>);</span><br><span class="line">fn3()<span class="comment">// Number(1) ['a','b','c']</span></span><br></pre></td></tr></table></figure>
<p><strong>所以说<code>bind（）</code>就是返回了一个函数，这个函数 call 原来的函数，而call的值你可以自己指定</strong></p>
<h4 id="1-4-new-是什么"><a href="#1-4-new-是什么" class="headerlink" title="1.4 new 是什么"></a>1.4 new 是什么</h4><h5 id="1-4-1-为什么要有-new-，我们的需求"><a href="#1-4-1-为什么要有-new-，我们的需求" class="headerlink" title="1.4.1 为什么要有 new ，我们的需求"></a>1.4.1 为什么要有 new ，我们的需求</h5><p>​    我们想要 批量创建对象 </p>
<h5 id="1-4-2"><a href="#1-4-2" class="headerlink" title="1.4.2"></a>1.4.2</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Solider</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.ID = i</span><br><span class="line">    <span class="keyword">this</span>.name = name || <span class="string">'no name'</span>;</span><br><span class="line">    <span class="keyword">this</span>.life = <span class="number">42</span></span><br><span class="line">&#125;</span><br><span class="line">Solider.prototype.兵种 = <span class="string">'解放军'</span>;</span><br><span class="line">Solider.prototype.攻击力 = <span class="number">100</span>;</span><br><span class="line">Solider.prototype.攻击 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123; &#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> soliders = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i &lt; <span class="number">100</span> ; i++)&#123;</span><br><span class="line">    soliders.push( <span class="keyword">new</span> Solider() )</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(soliders)</span><br></pre></td></tr></table></figure>
<p>习俗：</p>
<ol>
<li><p>构造函数首字母大学</p>
<pre><code>2. 构造函数可以省略掉 create
3. 如果构造函数没有参数，可以省略括号。
</code></pre></li>
</ol>
<h3 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h3><h5 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//prototype和 __proto__的区别	</span></span><br><span class="line"><span class="comment">//prototype是函数特有的属性 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">a.prototype</span><br><span class="line"><span class="comment">//访问 __proto__需要 a.prototype.__proto__</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">a.__proto__ = <span class="built_in">Number</span>&#123;&#125;;</span><br><span class="line">a.prototype = <span class="literal">undefined</span></span><br></pre></td></tr></table></figure>
<p>ES5</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Human</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//this = &#123;&#125;</span></span><br><span class="line">    <span class="comment">//this.__proto__ = Human.prototype JS之父的关怀。将这个空对象this的公有属性连上了 Human的公有属性</span></span><br><span class="line">    <span class="keyword">this</span>.name = options.name;</span><br><span class="line">    <span class="keyword">this</span>.肤色 = options.肤色 <span class="comment">//特有属性</span></span><br><span class="line">    <span class="comment">//return this 都是 JS之父的关怀</span></span><br><span class="line">&#125;</span><br><span class="line">Human.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;; <span class="comment">//公有属性</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Solider</span>(<span class="params">options,id</span>)</span>&#123;</span><br><span class="line">    Human.call(<span class="keyword">this</span>,options) <span class="comment">//用Solider里的this,放到 Human 里面用，这样Soilder就有了 name 和 say 的特有属性</span></span><br><span class="line">    <span class="keyword">this</span>.id = id;</span><br><span class="line">    <span class="keyword">this</span>.life = <span class="number">42</span>;</span><br><span class="line">&#125;</span><br><span class="line">Solider.prototype.attack = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"><span class="comment">//Solider.prototype.__proto__ = Human.prototype; 生产环境不能用</span></span><br><span class="line"><span class="comment">//但是 new 可以用，看看上面JS之父的关怀，我们换一种写法</span></span><br><span class="line"><span class="comment">//兼容IE</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fakeHuman</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">fakeHuman.prototype = Human.prototype;</span><br><span class="line">Solider.prototype = <span class="keyword">new</span> fakeHuman()</span><br><span class="line"><span class="comment">//Solider.prototype === fakeHuman.prototype === Human.prototype;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//不兼容IE</span></span><br><span class="line">Solider.prototype = <span class="built_in">Object</span>.create(Human.prototype);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Solider(&#123;<span class="attr">name</span>:<span class="string">'小小'</span>,肤色:<span class="string">'yellow'</span>&#125;,<span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<p>ES6</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Human</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = options.name</span><br><span class="line">        <span class="keyword">this</span>.肤色 = options.肤色</span><br><span class="line">    &#125;</span><br><span class="line">    eat() &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Solider</span> <span class="keyword">extends</span> <span class="title">Human</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options, id) &#123;</span><br><span class="line">        <span class="keyword">super</span>(options)</span><br><span class="line">        <span class="keyword">this</span>.id = id,</span><br><span class="line">            <span class="keyword">this</span>.life = <span class="number">42</span></span><br><span class="line">    &#125;</span><br><span class="line">    attack() &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Solider(&#123;<span class="attr">name</span>:<span class="string">'小小'</span>,肤色:<span class="string">'yellow'</span>&#125;,<span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<p>作业题1</p>
<p>要求不使用 class，完成如下需求：</p>
<p>写出一个构造函数 Animal<br>输入为一个对象，如 {物种:’xxx’}<br>输出为一个新对象，该对象的共有属性为 {物种:’xxx’,行动: function(){}}，没有自有属性<br>再写出一个构造函数 Human<br>Human 继承 Animal<br>输入为一个对象，如 {name: ‘Frank’, birthday: ‘2000-10-10’}<br>输出为一个新对象，该对象自有的属性有 name 和 birthday，共有的属性有物种、行动和使用工具<br>在写出一个构造函数 Asian<br>Asian 继承 Human<br>输入为一个对象，如 {city: ‘北京’, name: ‘Frank’, birthday: ‘2000-10-10’ }<br>输出为一个新对象，改对象自有的属性有 name city 和 bitrhday，共有的属性有物种、行动和使用工具和肤色<br>既</p>
<p>最后一个新对象是 Asian 构造出来的<br>Asian 继承 Human，Human 继承 Animal<br>注意，不要使用 class 关键字，使用课上讲的原型链</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">Animal.prototype.行动 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Human</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = options.name;</span><br><span class="line">    <span class="keyword">this</span>.birthday = options.birthday;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Human.prototype = Object.create(Animal.prototype)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fake</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">fake.prototype = Animal.prototype;</span><br><span class="line">Human.prototype = <span class="keyword">new</span> fake();</span><br><span class="line"><span class="comment">//关键点 此时Human.prototype.constructor指向function Animal()&#123;&#125;</span></span><br><span class="line"><span class="comment">//因此需要改变constructor指向Human</span></span><br><span class="line">Human.prototype.constructor = Human</span><br><span class="line">Human.prototype.物种 = <span class="string">'人类'</span>;</span><br><span class="line">Human.prototype.使用工具 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Human(&#123;</span><br><span class="line">    name: <span class="string">'Frank'</span>,</span><br><span class="line">    birthday: <span class="string">'2000-10-10'</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Asian</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//关键点，将Human的特有属性，放到Asian来</span></span><br><span class="line">    Human.call(<span class="keyword">this</span>, options)</span><br><span class="line">    <span class="keyword">this</span>.city = options.city;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">Asian.prototype.肤色 = <span class="string">'yellow'</span></span><br><span class="line"><span class="comment">//继承的关键点</span></span><br><span class="line"><span class="comment">// Asian.prototype = Object.create(Human.prototype)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fake2</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">fake2.prototype = Human.prototype;</span><br><span class="line">Asian.prototype = <span class="keyword">new</span> fake2();</span><br><span class="line"><span class="comment">//修改 constructor 的指向</span></span><br><span class="line">Asian.prototype.constructor = Asian</span><br><span class="line">Asian.prototype.肤色 = <span class="string">'yellow'</span></span><br><span class="line"><span class="keyword">var</span> h = <span class="keyword">new</span> Asian(&#123;</span><br><span class="line">    city: <span class="string">'北京'</span>,</span><br><span class="line">    name: <span class="string">'Frank'</span>,</span><br><span class="line">    birthday: <span class="string">'2000-10-10'</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>作业题2</p>
<p>要求使用 class，完成如下需求：</p>
<p>写出一个构造函数 Animal<br>输入为一个对象，如 {物种:’xxx’}<br>输出为一个新对象，该对象的共有属性为 {行动: function(){}}，自有属性为 {物种:’xxx’}<br>再写出一个构造函数 Human<br>Human 继承 Animal<br>输入为一个对象，如 {name: ‘Frank’, birthday: ‘2000-10-10’}<br>输出为一个新对象，该对象自有的属性有 name、物种和 birthday，共有的属性有行动和使用工具<br>在写出一个构造函数 Asian<br>Asian 继承 Human<br>输入为一个对象，如 {city: ‘北京’, name: ‘Frank’, birthday: ‘2000-10-10’ }<br>输出为一个新对象，改对象自有的属性有 name city 物种 肤色和 bitrhday，共有的属性有行动和使用工具<br>既</p>
<p>最后一个新对象是 Asian 构造出来的<br>Asian 继承 Human，Human 继承 Animal<br>注意，要使用 class 关键字</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">   <span class="keyword">constructor</span>()&#123;</span><br><span class="line"></span><br><span class="line">   &#125;</span><br><span class="line">   行动()&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Human</span> <span class="keyword">extends</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">        <span class="keyword">super</span>()</span><br><span class="line">        <span class="keyword">this</span>.name = options.name</span><br><span class="line">        <span class="keyword">this</span>.birthday = options.birthday</span><br><span class="line">    &#125;</span><br><span class="line">    使用工具()&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Asian</span> <span class="keyword">extends</span> <span class="title">Human</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">        <span class="keyword">super</span>(options)</span><br><span class="line">        <span class="keyword">this</span>.city = options.city</span><br><span class="line">        <span class="keyword">this</span>.物种 = <span class="string">'人类'</span></span><br><span class="line">        <span class="keyword">this</span>.肤色 = <span class="string">'黄色'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> h = <span class="keyword">new</span> Asian(&#123;<span class="attr">city</span>: <span class="string">'北京'</span>, <span class="attr">name</span>: <span class="string">'Frank'</span>, <span class="attr">birthday</span>: <span class="string">'2000-10-10'</span> &#125;)</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="f6d05227.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          JavaScript中的异步
        
      </div>
    </a>
  
  
    <a href="88d55ab5.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">制作一个基于Vue的Tabs轮子</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/6936d1ca.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
